// 页面整体
.view-container {
  min-height: calc(100vh - 86px);
  padding: 15px;
  box-sizing: border-box;

  // 头部和主体
  .view-header, .view-section {
    margin-bottom: 20px;

    &:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
  }

  & > footer {
    text-align: right;
    margin-top: 15px;
  }

}

// 页面头部
.view-header {
  position: relative;

  .header-container {
    position: relative;
  }

  .header-title {
    border-bottom: 2px solid #42B983;
    padding-bottom: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .header-interaction {
    display: flex;
    justify-content: flex-end;

    .header-interaction-item {
      margin-left: 20px;
    }
  }

  .header-form {
    display: flex;
    flex-direction: row-reverse;
    min-height: 32px;

    .header-form-item {
      margin-left: 15px;

      &.title-search {
        width: 15%;
      }
    }

    .btn-arrow-down {
      &.el-button--default {
        padding: 12px 9px;
      }

      &.el-button--medium {
        padding: 10px 8px;
      }

      &.el-button--small {
        padding: 9px 7px;
      }

      &.el-button--mini {
        padding: 7px 6px;
      }
    }
  }

  .hideMenu {
    position: absolute;
    left: 0;
    right: 0;
    padding: 25px 40px;
    margin-top: 50px;
    border: 1px solid #ececec;
    box-shadow: 0 7px 18px -12px #bdc0bb;
    z-index: 99;
    background-color: white;

    section {
      .el-date-editor {
        width: 100%;
      }

      .el-select {
        width: 100%;
      }

      .el-form-item__label {
        font-weight: 500;
      }
    }

    footer {
      text-align: right;
    }
  }
}

// 页面主体
.view-section {

}

#custom-btn-color {

  .el-button {
    transition: all 0.1s;
  }

  .waring-btn {
    color: #19be6b;
    border: 1px solid #19be6b;

    &:hover {
      color: #47cb89;
      background: rgba(244, 252, 248, .5);
    }
  }

  .success-btn {
    color: #2db7f5;
    border: 1px solid #2db7f5;

    &:hover {
      color: #57c5f7;
      background: rgba(245, 251, 254, .5)
    }
  }

  .danger-btn {
    color: #f90;
    border: 1px solid #f90;

    &:hover {
      color: #ffad33;
      background: rgba(255, 250, 242, .5);
    }
  }
}


.form-container {
  .el-select, .el-date-picker {
    width: 100%;
  }
}

.save-page-container {
  padding: 20px 40px;
  margin: 0 40px;
  background-color: white;

  .header {
    text-align: right;
    position: relative;
    margin-bottom: 20px;

    .el-form-item {
      margin-bottom: 0;
    }
  }

  .header-title {
    border-bottom: 2px solid #42B983;
    padding-bottom: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

}

.bg-gray {
  background-color: #f7f7f7;
}


/* 段落和标题 */
p {
  margin: 0;
}

.title-1 {
  font-size: 20px;
}

.title-2 {
  font-size: 18px;
}

.title-3 {
  font-size: 16px;
}

.title-4 {
  font-size: 14px;
}


/* 覆盖element-ui默认样式 */
// 表格线对齐
body .el-table th.gutter {
  display: table-cell !important;
}

// 分页背景颜色
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #13CE66;
}

// 弹出框
.el-dialog {
  box-shadow: #a8a8a8 0 4px 21px;

  .el-dialog__body {
    padding: 10px 45px;
  }

  .el-dialog__footer {
    padding: 10px 45px 30px;
    text-align: right;

    .el-button {
      margin-left: 10px;

      &:not(:first-of-type) {
        margin-bottom: 20px;
      }
    }
  }
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.top-bar {
  position: relative;

  .top-bar-tag {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #008B7B;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* 表头字体颜色加深 */
.el-table thead {
  color: #636569;
}

/* global */
/*.color-refresh-item {
  color:#409EFF;
}
.color-edit-item{
  color:#67C23A;
}
.color-del-item{
  color:#F56C6C;
}*/

label.el-form-item__label {
  font-weight: 500;
}

.el-link,
.el-link.el-link--default {
  color: #1890ff;
}


.zh-form-container {
  width: 600px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;

  .tip {
    margin-top: 10px;
    font-size: 13px;
    color: gray;
  }

  .el-select {
    width: 50%;
  }

  .el-date-editor {
    width: 50%;
  }
}
.save-btn {
  margin-top: 20px;
}

.el-dialog {
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  .el-dialog__body {
    flex:1;
    overflow: auto;
  }
}
